import { Suspense } from "react"
import { SystemSettings } from "@/components/system-settings"
import { Skeleton } from "@/components/ui/skeleton"

export default function SettingsPage() {
  return (
    <div className="mx-auto max-w-7xl space-y-6">
      <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
        <h1 className="text-2xl font-bold md:text-3xl">系统设置</h1>
      </div>
      <Suspense fallback={<Skeleton className="h-[600px] w-full rounded-lg" />}>
        <SystemSettings />
      </Suspense>
    </div>
  )
}
